<template>
  <view class="content">
    <!-- <button @click="openFiles">预览文件</button>-->
    <!-- <button @click="testSync">测试异步</button>-->
    <!-- <web-view src="https://zhujinhui.top/minio/zhujinhui/minis/1111.pdf">1111111111111111111111</web-view> -->
    <!-- 搜索区域开始 -->
    <view class="search" style="display: flex;justify-content: start;align-items: center;margin-top: 10rpx;">
      <view>
        <image src="../../static/mainicon.png" style="width: 64rpx;height: 60rpx;padding-left: 20rpx;"></image>
      </view>
      <view
          style="background-color: #e3e4e8; display: flex;justify-content: center;align-items: center;width: 624rpx; height: 60rpx; border-radius: 30rpx;margin-left: 20rpx;">
        <view style="padding-left: 18rpx;">
          <image src="../../static/search.png" style="width: 30rpx;height: 30rpx;"></image>
        </view>
        <view>
          <input v-model="search"
                 style=" width: 440rpx;height: 60rpx;margin-left: 6rpx;font-size: 26rpx;border-radius: 30rpx;padding-left: 4rpx;"
                 placeholder="请输入关键词搜索"/>
        </view>
        <view
            style="display: flex;justify-content: center;align-items: center; border-radius: 25rpx;margin-left: 18rpx;"
            @click="serachEvt">
          <image src="../../static/sicon.png" style="width: 100rpx;height: 50rpx;"></image>
        </view>
      </view>
    </view>
    <!-- 搜索区域结束 -->
    <view class="swiper_area">
      <!-- 轮播图 开始 -->
      <swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
              :duration="duration">
        <view v-for="(item, index) in bannerList" :key="item.id">
          <swiper-item>
            <view class="swiper-item">
              <image :src="imgPrefx+item.bannerUrl" style="width: 100%;height: 100%; border-radius: 10rpx;"
                     @click="jumpSource(item)"/>
            </view>
          </swiper-item>
        </view>
      </swiper>
      <!-- 轮播图 结束 -->
    </view>
    <!-- 工具栏 ，开始 -->
    <view class="gaoqian">
      <view class="gaoqian_item" @click="jump">
        <view style="width: 82rpx;height: 72rpx;">
          <image src="../../static/shop.png" style="width: 100%;height: 100%;"></image>
        </view>
        <view>商品</view>
      </view>
      <view class="gaoqian_item" @click="toggleOverlay">
        <view style="width: 82rpx;height: 72rpx;">
          <image src="../../static/skill.png" style="width: 100%;height: 100%;"></image>
        </view>
        <view>技能培训</view>
      </view>
      <view class="gaoqian_item" @click="jumpMyteam">
        <view style="width: 82rpx;height: 72rpx;">
          <image src="../../static/team.png" style="width: 100%;height: 100%;"></image>
        </view>
        <view>我的团队</view>
      </view>
    </view>
    <!-- 工具栏 ，结束 -->
    <!--分割线-->
    <view class="line_desc_area">
      <view class="line_desc"/>
    </view>
    <view class="new_tui_area">
      <view class="new_tui">最新推荐</view>
    </view>
    <!--文章区域 开始-->
    <view v-for="(item, index) in goodsList" :key="item.id">
      <view class="webzhang_area" @click="jumpDeatil(item.id,imgPrefx+item.url)">
        <videw class="webzhang_img">
          <image :src="imgPrefx+item.url" style="width: 100%;height: 100%; border-radius: 10rpx;"></image>
        </videw>
        <videw class="webzhang_desc">
          <view class="webzhang_title">{{ item.title }}</view>
          <view class="webzhang_zan">
            <view>阅读{{ item.userRead }}</view>
            <view style="width: 16rpx;height: 30rpx;">
              <image src="../../static/right_jian.png" style="width: 100%;height: 100%;"></image>
            </view>
          </view>
        </videw>
      </view>
    </view>
    <!--文章区域 结束-->
    <!-- 弹窗层 开始 -->
    <view class="overlay" v-if="showOverlay" @touchmove.stop.prevent="">
      <view class="close" @click="closed">X</view>
      <view class="laybg">
        <image src="../../static/layer.png" style="width: 100%;height: 100%;"></image>
      </view>
      <view class="lock">
        <image src="../../static/lock.png" style="width: 100%;height: 100%;"></image>
      </view>
      <view class="laytxt">此模块只对代理开放</view>
    </view>
    <!-- 弹窗层 开始 -->
  </view>
  </view>
</template>

<script>
import config from '../../utils/config.js'
import request from '../../utils/request.js'
import {
  verifyTokenExpir
} from '../../utils/common.js'

export default {
  data() {
    return {
      background: ['color1', 'color2', 'color3'],
      indicatorDots: true,
      autoplay: true,
      interval: 3000,
      duration: 800,
      showOverlay: false, // 控制遮罩层显示的变量,
      goodsList: [],
      bannerList: [],
      imgPrefx: config.imgPrefx,
      search: ''
    }
  },
  created() {
    //verifyTokenExpir() // 校验token合法性
    this.banners()
    this.queryList()
  },
  onShareAppMessage(res) {
    let pages = getCurrentPages(); //获取当前页面栈的信息
    let currentPage = pages[pages.length - 1]; //获取到当前页面栈中最后一个页面的索引
      if (res.from === 'button') {// 来自页面内分享按钮
        console.log(res.target)
      }
      return {
        title: '逐金污师丨成人情趣甄选好物',
        path: currentPage.route + `?id=${this.id}&share=${this.share}` //后面是路径上要传递的参数
      }
    },
	onShareTimeline(res) {
	  let pages = getCurrentPages(); //获取当前页面栈的信息
	  let currentPage = pages[pages.length - 1]; //获取到当前页面栈中最后一个页面的索引
	    if (res.from === 'button') {// 来自页面内分享按钮
	      console.log(res.target)
	    }
	    return {
	      title: '逐金污师丨成人情趣甄选好物',
	      path: currentPage.route + `?id=${this.id}&share=${this.share}` //后面是路径上要传递的参数
	    }
	  },
	  onShareTimeline(res) {
	    let pages = getCurrentPages(); //获取当前页面栈的信息
	    let currentPage = pages[pages.length - 1]; //获取到当前页面栈中最后一个页面的索引
	      if (res.from === 'button') {// 来自页面内分享按钮
	        console.log(res.target)
	      }
	      return {
	        title: '逐金污师丨成人情趣甄选好物',
	        path: currentPage.route + `?id=${this.id}&share=${this.share}` //后面是路径上要传递的参数
	      }
	    },
  methods: {
    jumpSource(e) { // 跳转资源 0:跳转商品，1:跳转文章
      if (e.jumpType == 0) {
        uni.navigateTo({
          url: "/pages/gdetail/gdetail?id=" + e.sourceId
        })
      } else if (e.jumpType == 1) {
        uni.navigateTo({
          url: "/pages/wenzhang/wenzhang?id=" + e.sourceId
        })
      }
    },
    testSync() {
      console.info("测试异步执行");
      const promise1 = new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve('foo');
        }, 5000);
      });
      promise1.then(v => {
        console.info(v)
      })
    },
    openFiles() {
      uni.showLoading();
      uni.downloadFile({
        url: 'https://zhujinhui.top/ss/zhujinhui/minis/1111.pdf',
        //filePath: `${uni.env.USER_DATA_PATH}/${我是自定义标题}.pdf`,
        filePath: `${uni.env.USER_DATA_PATH}/2121212.pdf`,
        success: function (res) {
          uni.hideLoading()
          uni.showToast({
            title: '下载成功',
            icon: 'success',
            duration: 1000
          });
          var filePath = res.filePath;
          uni.openDocument({
            filePath: filePath,
            showMenu: true,
            success: function (res) {
              console.log('打开文档成功');
            }
          });
        }
      });
    },
    banners() {
      var _this = this;
      request({
        url: '/app/v1/banner/list',
        method: "GET",
      }).then((res) => {
        _this.bannerList = res.data
      })
    },
    queryList() {
      let _this = this;
      request({
        url: '/app/v1/wenzhang/list',
        method: "POST",
        data: {
          channel: '0'
        }
      }).then((res) => {
        if (200 == res.code) {
          _this.goodsList = res.data;
        } else {
          console.error('查询文章列表失败');
        }
      })
    },
    serachEvt() { // 搜索
      var _this = this;
      request({
        url: '/app/v1/wenzhang/list',
        method: "POST",
        data: {
          'title': _this.search
        }
      }).then((res) => {
        if (200 == res.code) {
          if ('' == res.data) {
            uni.showToast({
              title: '无搜索结果',
              icon: 'error',
              duration: 2000
            });
          }
          _this.goodsList = res.data;
        }
      })
    },
    jumpDeatil(id,url) {
      uni.navigateTo({
        url: "/pages/wenzhang/wenzhang?id=" + id +"&url="+url
      })
    },
    jump() {
      uni.navigateTo({
        url: "/pages/goods/goods"
      })
    },
    toggleOverlay() {
      var _this = this;
      const token = uni.getStorageSync('token');
      if (!token) {
        _this.showOverlay = !_this.showOverlay;
        return;
      }
      uni.navigateTo({
        url: '/pages/jinengpx/jinengpx'
      })
    },
    closed() {
      this.showOverlay = !this.showOverlay;
    },
    jumpMyteam() {
      const token = uni.getStorageSync('token');
      if (!token) {
        uni.navigateTo({
          url: '/pages/login/login'
        })
      } else {
		  request({
		    url: '/getInfo',
		    method: "GET"
		  }).then(res => {
		    if (200 == res.code) {
		  			// 如果是管理员
		  			if(res.roles.indexOf("admin") > -1){
		  				uni.navigateTo({
		  				  url: "/pages/adminteam/adminteam"
		  				})
		  			}else{
		  				uni.navigateTo({
		  				  url: "/pages/myteam/myteam"
		  				})
		  			}
		    }
		  })
      }
    }
  }
}
</script>
<style>
.swiper_area {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20rpx;
}

.swiper {
  width: 700rpx;
  height: 394rpx;
}

.swiper-item {
  width: 700rpx;
  height: 394rpx;
  line-height: 394rpx;
  border-radius: 10rpx;
}

.gaoqian {
  margin-top: 30rpx;
  margin-left: 10rpx;
  margin-right: 10rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.gaoqian_item {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  background-color: white;
  width: 203rpx;
  height: 142rpx;
  border-radius: 10rpx;
  padding-top: 20rpx;
  font-size: 24rpx;
  /**border: solid 1rpx blue;**/
}

.line_desc_area {
  display: flex;
  justify-content: center;
  align-items: center;
}

.line_desc {
  border-bottom: solid 1rpx #d3d3d3;
  height: 50rpx;
  width: 700rpx;
}

.new_tui_area {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30rpx;
  margin-bottom: 30rpx;
}

.new_tui {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 700rpx;
  height: 68rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
  font-weight: 500;
  background-image: linear-gradient(to right, #fdd706, #fdb932);
}

.webzhang_area {
  /** border: solid 1rpx red; **/
  width: 700rpx;
  height: 194rpx;
  border-radius: 10rpx;
  margin-top: 20rpx;
  margin-left: 20rpx;
  margin-right: 20rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: white;
}

/**设置背景图并填充整个div**/
.webzhang_img {
  /** border: solid 1rpx blue; **/
  width: 214rpx;
  height: 144rpx;
  margin-left: 16rpx;
  background-size: cover;
  background-position: center;
  /* 可选，确保图片居中显示 */
  background-repeat: no-repeat;
  /* 防止背景图片重复 */
  background-image: url("https://zhujinhui.top/minio/zhujinhui/minis/wenzhang_bg.png");
  /** background-color: antiquewhite;**/
}

.webzhang_desc {
  height: 160rpx;
  width: 450rpx;
  margin-left: 20rpx;
  border-radius: 4rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-start;
}

.webzhang_title {
  font-size: 32rpx;
  margin-left: 6rpx;
}

.webzhang_zan {
  font-size: 24rpx;
  color: #d1d1d1;
  /**border: solid 1rpx blue;**/
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 26rpx;
  width: 400rpx;
}

/**自定义弹窗**/
/**遮罩层底层背景图**/
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); // 半透明遮罩层颜色
  z-index: 91;
}

.laybg {
  position: fixed;
  top: 300rpx;
  right: 108rpx;
  z-index: 92;
  height: 520rpx;
  width: 520rpx;
  color: rgba(0, 0, 0, 0.5);
}

/** 关闭按钮**/
.close {
  position: fixed;
  top: 310rpx;
  right: 130rpx;
  z-index: 93;
  font-size: 36rpx;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.5);
  /**border:  solid 1rpx red;**/
  width: 50rpx;
  width: 60rpx;
  display: flex;
  justify-content: center;
}

/**锁图标**/
.lock {
  position: fixed;
  top: 400rpx;
  right: 270rpx;
  z-index: 93;
  width: 200rpx;
  height: 180rpx;
  color: rgba(0, 0, 0, 0.5);
}

.laytxt {
  position: fixed;
  top: 650rpx;
  right: 160rpx;
  z-index: 93;
  width: 360rpx;
  font-weight: 600;
}
</style>
